import Taro, {Component, Config} from "@tarojs/taro";
import {View, Image, Text} from "@tarojs/components";
import {inject, observer} from '@tarojs/mobx'
import {IStoreProps} from '../../store/Stores'
import {getRuntime, pageSize} from '../../utils/common'

import {toJS} from 'mobx'
import './index.less'
import './course_list.less'
import img_07 from '../../assets/img/img_07.jpg'



// 建企商学院
interface IHomeProps extends IStoreProps {}

@inject("stores")
@observer
class CourseList extends Component<IHomeProps> {
  constructor(props) {
    super(props)
  }

  state = {
    allCategories: [],
    items: [],
    totalCount: 0,
    courseInformation: {},
    currentCateGoryId: 1,
    pageIndex: 1,
    pageSize,
  }

  componentWillMount(): void {
    Taro.setNavigationBarTitle({title: '建企商学院'})
    this.getAllCategories()
    this.getAllCourseInformation()
  }
  changeNav(currentCateGoryId:number) {
    this.setState({
      currentCateGoryId
    },() => {
      this.getAllCourseInformation()
    })
  }
  getAllCategories() {
    let businessSchool = this.props.stores.BusinessSchool
    businessSchool.getAllCategories({
      callback: res => {
        // console.log(res)
        this.setState({
          allCategories: res.items
        })
      }
    })
  }

  getAllCourseInformation() {
    let businessSchool = this.props.stores.BusinessSchool
    let { currentCateGoryId, pageIndex, pageSize } = this.state
    businessSchool.getAllCourseInformation({
      cateGoryId: currentCateGoryId,
      pageIndex,
      pageSize,
      callback: res => {
        if (pageIndex === 1) {
          this.setState({
            totalCount: toJS(res.totalCount),
            items: toJS(res.items)
          })
        }else {
          const { items } = this.state;
          items.push(...res.items || []);
          this.setState({
            totalCount: res.totalCount,
            items
          })
        }
      }
    })
  }
  onReachBottom(): void {
    let {totalCount, pageSize, pageIndex} = this.state
    const {loading} = this.props.stores.homeStore;
    if (totalCount > pageIndex * pageSize && !loading) {
      this.setState({
        pageIndex: pageIndex + 1
      }, () => {
        this.getAllCourseInformation()
      })
    }
  }

  handelRouter(url: string = '/pages/index/index'): void {
    getRuntime().navigateTo(url)
  }
  render() {
    let { allCategories, currentCateGoryId, items } = this.state
    return (
     <View className='college-index college-list'>
       <View className='column-type'>
         {
           allCategories.reverse().map(item => {
              return(
                <Text className={currentCateGoryId === item.id ? 'column column-active' : 'column'}
                      key={item.id}
                      onClick={this.changeNav.bind(this, item.id)}
                >{item.cateGoryName}</Text>
              )
           })
         }
       </View>

       <View className='interval' />
       {items&&
       items.map(item => {
           return(
             <View className='list-08-item'
                   onClick={this.handelRouter.bind(this, '/pages/business_school/detail?id='+item.id)}>
               <Image className='item-img' src={item.courseLogoImg} />
               <View className='info'>
                 <View className='title'>
                   {item.courseName}
                 </View>
                 <View className='old-price'>￥{item.coursePrice}</View>
                 <View className='price-wrap'>
                   <View className='price'>VIP会员 ￥
                     <Text className='big'>{item.vipCourserPrice }</Text>
                   </View>
                   <View className='num'>{item.studyCount}人学过</View>
                 </View>
               </View>
             </View>
           )
         })
       }
       {items.length<=0 ? <View className='page-none-info'>暂时没有相关课程信息~</View> : ''}
     </View>
    )
  }
}

export default CourseList
